<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_简单的发布微博效果(添加删除节点练习)</title>
    <style>
        .container {
            width: 480px;
            padding: 10px;
            margin:100px auto;
            border:1px solid #ff705e;
        }

        textarea {
            resize: none;
        }

        ul{
            list-style: none;
        }

        #ul li a{
            float: right;
        }
    </style>
    <script>
        window.onload = function () {
            var txt = document.getElementsByTagName("textarea")[0];
            var button = document.getElementById("submit");
            var ul = document.getElementById("ul");
            button.onclick = function () {
                if (!txt.value || txt.value == ""){
                    alert("内容不能为空");
                    return;
                }
                var li = document.createElement("li");
                li.innerHTML = txt.value+"<a href='javascript:;'>删除</a>"

                if (ul.children.length == 0){
                    ul.appendChild(li);
                }else {
                    ul.insertBefore(li,ul.children[0]);
                }
                txt.value = "";
                txt.focus();

                var as = document.getElementsByTagName("a");
                for (var i = 0; i < as.length; i++) {
                    var obj = as[i];
                    obj.onclick = function () {
                        ul.removeChild(this.parentNode);
                    }
                }
            }


        }
    </script>

</head>
<body>
    <div class="container">
        微博发布<textarea name="" id="" cols="30" rows="10"></textarea><button id="submit">发布</button>
        <ul id="ul"></ul>
    </div>
</body>
</html>